<!DOCTYPE html>
<html lang="en">
<head>
<title>SunivoWeb | Demo</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="author" content="Huazz Tsai">
<meta name="keyword" content="">
<link rel="shortcut icon" href="../customize/ico/favicon.png">
<link rel="apple-touch-icon" href="../customize/ico/favicon.png">
<!--[if lt IE 9]>
<script type="text/javascript" src="../script/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="../customize/css/sunivoweb.frame.css"/>
<link rel="stylesheet" href="../customize/css/reset.css"/>
<link rel="stylesheet" href="../customize/css/sunivoweb_style.css">
<script type="text/javascript" src="../customize/script/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="index-nav-container">
            <ul class="index-nav">
                <li><a href="../../index.html">首页</a></li>
                <li  class="active"><a href="components.html">组件</a></li>
                <li><a href="#">JavaScript插件</a></li>
            </ul>
</div>
<div class="component-banner-bg">
  <div class="component-banner"> 
   </div>
</div>
<div class="component-content clearfix"> 
  <!--左边列表-->
  <ul class="component-list" id="pordAttr">
    <li><a class="on" href="javascript:void(0);" grop="Index_box" nav="IndexTab_0">Bootstrap</a>
      <ul class="component-second-list" grop="Index_box" nav="IndexTab_0" id="plug1">
      </ul>
    </li>
    <li><a href="javascript:void(0);" grop="Index_box" nav="IndexTab_1">Sunivo</a>
      <ul class="component-second-list" grop="Index_box" nav="IndexTab_1" style="display:none;" id="plug2">
      </ul>
    </li>
    <li><a href="javascript:void(0);" grop="Index_box" nav="IndexTab_2">Plugin</a>
      <ul class="component-second-list" grop="Index_box" nav="IndexTab_2" style="display:none;" id="plug3">
      </ul>
    </li>
  </ul>
  <!--右边具体插件-->
  <div class="component-substance">
    <h1>点击版nav </h1>
    <!--插件编译人、编译时间-->
    <label>开发者：石怡　发布日期：2014-03-27　版本号：1.0　评价：★ ★ ★</label>
    <div class="component-block">
      <h2>★ 案例</h2> 导航条是在您的应用或网站中作为导航标头的响应式元组件，可以折叠（并且可开可关）。</div>
    <div class="">
      <h3>静态案例</h3> 带有二级导航的导航栏。</div>
    <div class="bs-docs-example"> 
      <!--添加插件案例-->
      <ul class="component-list" style="float:none;">
        <li><a class="on" href="#" >Navigation bar 1</a>
          <ul class="component-second-list">
            <li><a class="two-on" href="#">Navigation column 1</a></li>
            <li><a href="#">Navigation column 2</a></li>
            <li><a href="#">Navigation column 3</a></li>
          </ul>
        </li>
        <li><a href="#">Navigation bar 2</a></li>
        <li><a href="#">Navigation bar 3</a></li>
      </ul> 
    </div>
    <!--添加插件代码-->
    <pre class="prettyprint linenums"><ol class="linenums"><li>&lt;ul <span class="text-success">class=</span><span class="text-warning">&quot;component-list&quot;</span> <span class="text-success">id=</span><span class="text-warning">&quot;case&quot;</span> style=&quot;float:none;&quot;&gt;</li><li>  &lt;li&gt;&lt;a <span class="text-success">class=</span><span class="text-warning">&quot;on&quot;</span> href=&quot;#&quot; &gt;Navigation bar 1&lt;/a&gt;</li><li>    &lt;ul <span class="text-success">class=</span><span class="text-warning">&quot;component-second-list&quot;</span>&gt;</li><li>      &lt;li&gt;&lt;a <span class="text-success">class=</span><span class="text-warning">&quot;two-on&quot;</span> href=&quot;#&quot;&gt;Navigation column 1&lt;/a&gt;&lt;/li&gt;</li><li>      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation column 2&lt;/a&gt;&lt;/li&gt;</li><li>      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation column 3&lt;/a&gt;&lt;/li&gt;</li><li>   &lt;/ul&gt;</li><li>  &lt;/li&gt;</li><li>  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation bar 2&lt;/a&gt;&lt;/li&gt;</li><li>  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Navigation bar 3&lt;/a&gt;&lt;/li&gt;</li><li>&lt;/ul&gt;</li></ol></pre>

    <div class="component-block"><h2>★ 效果</h2>点击一级导航，有展开、收起功能</div>
    <div class="bs-docs-example"> 
      <!--添加插件案例-->
      <ul class="component-list" style="float:none;" id="case">
        <li><a class="on" href="javascript:void(0);" >Navigation bar 1</a>
          <ul class="component-second-list">
            <li><a class="two-on" href="javascript:void(0);">Navigation column 1</a></li>
            <li><a href="javascript:void(0);">Navigation column 2</a></li>
            <li><a href="javascript:void(0);">Navigation column 3</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">Navigation bar 2</a>
          <ul class="component-second-list" style="display:none;">
            <li><a class="two-on" href="javascript:void(0);">Navigation column 1</a></li>
            <li><a href="javascript:void(0);">Navigation column 2</a></li>
            <li><a href="javascript:void(0);">Navigation column 3</a></li>
          </ul>
        </li>
        <li><a href="javascript:void(0);">Navigation bar 3</a>
          <ul class="component-second-list" style="display:none;">
            <li><a class="two-on" href="javascript:void(0);">Navigation column 1</a></li>
            <li><a href="javascript:void(0);">Navigation column 2</a></li>
            <li><a href="javascript:void(0);">Navigation column 3</a></li>
          </ul>
        </li>
      </ul> 
    </div>
    <pre class="prettyprint linenums"><ol class="linenums"><li>$(function() {</li><li>   $(document).ready(function(){</li><li>      $(&quot;#case li&quot;).click(function(){</li><li>         $(this).find(&quot;ul&quot;).toggle(200); </li><li>      })；</li><li>   })；</li><li>})</li></ol></pre>
    <script type="text/javascript">
    $(function() {
      $(document).ready(function(){
        $("#case li").click(function(){
          $(this).find("ul").toggle(200); 
        })})})
    </script> 
    <h2>★ 使用注意</h2>
    <p>1.点击版导航是通过调用id(id=case)实现js效果</p>
  </div>
</div>
<!--底部-->
<div class="foot">
  <p>本网站所列开源项目的中文版文档全部由Sunivo Web成员翻译整理</p>
  <p>Powered by Sunivo Web Team 站长统计</p>
</div>
<script type="text/javascript" src="../customize/script/sunivoweb.frame.js"></script> 
<script type="text/javascript" src="../customize/script/sunivoweb.app.js"></script> 
<script type="text/javascript" src="../customize/script/ports.js"></script> 
<script type="text/javascript" src="../customize/script/portSelector.js"></script> 
<script>(function($){$.initover = function(fn) {$(document).one('initover', fn);}})(jQuery);</script>
<script type="text/javascript" src="../customize/script/handlebars.js"></script>
<script type="text/javascript" src="../customize/script/sunivoweb-left-nav.js"></script>
<script id="table-template" type="text/x-handlebars-template">
      {{#each plug1}}
        {{#if link}}
          <li>
		    <a href="{{link}}">{{title}}</a>
          </li>
        {{/if}}
      {{/each}}
	  
	  
      {{#each plug2}}
        {{#if link}}
          <li>
		    <a href="{{link}}">{{title}}</a>
          </li>
        {{/if}}
      {{/each}}
	  
      {{#each plug3}}
        {{#if link}}
          <li>
		    <a href="{{link}}">{{title}}</a>
          </li>
        {{/if}}
      {{/each}}
</script>
</body>
</html>